<template>
    <div class="box">
            <figure  v-for="tjxinxi in tjxinxis" :key="tjxinxi.id" >
                    <img :src="tjxinxi.img " alt="">
                    <p>{{tjxinxi.title}}</p>
                    <div class="zi">
                        <div class="zileft"><img :src="tjxinxi.img1 "  alt=""> {{tjxinxi.author}}</div>
                        <div class="ziright">
                            <span>{{tjxinxi.type}}</span>&nbsp;&nbsp;&nbsp;
                            <span> 
                              <i class="iconfont icon-comment-v2"></i>
                                {{tjxinxi.liuyan}}</span>
                        </div>
                    </div>

               
            </figure>


    </div>
</template>
<script>
export default {

    data(){
        return {
     
          tjxinxis:[]
        }
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/tjxinxis",true);
        xhr.onreadystatechange = ()=>{
            // xhr.reayState==4: 表示请求响应的过程完毕。
            // xhr.status==200 ：后端响应了正常的数据（响应没有问题）
            if(xhr.readyState==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.tjxinxis = JSON.parse(xhr.responseText);
            }
        }
        xhr.send();
    }    
}
</script>


<style scoped>

.dazao figure{
    display: flex;
    flex-direction: column;
    align-items: left;
    font-size: 0.12rem;
}
.dazao figure  img{
    width:3.35rem ;
    height:1.88rem ;
    /* margin-bottom: 0.05rem; */
}
.dazao p{
    width:3.35rem ;
    height:0.2rem ;
    font-size: 0.17rem;
    margin: 0.1rem auto;
}
.dazao .zi{
    width:3.35rem ;
    height:0.25rem ;
    display: flex;  
    justify-content: space-between;
    margin-top: 0.05rem;
    padding-top:0.05rem ;
    color:#8b8888 ;
    margin-bottom: 0.1rem;
}

.dazao  .zileft{
    font-size:0.12rem ;
}
.dazao  .zileft img{
    width: 0.17rem;
    height: 0.17rem;
}
.dazao  .ziright{
    font-size:0.12rem ;
    /* margin:0.1rem; */
}
.dazao   .ziright span{
  border-radius: 5px;
  display: inline-block;
  border: 1px solid #c8c8c8;
  padding: 2px;

}





</style>


